<template>
  <div>
    <r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"
      :inline="true" />

    <r-table :isPagination="true" :isHandle="true" :tableData="tableData" :tableCols="tableCols" :tablePage="pagination"
      :loading="tableLoading" :tableHandles="tableHandles" :isSelection="false" @refresh="page()" />

    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
      labelWidth="100px" dialogWidth="500px" :isHandle="true" />
  </div>
</template>

<script>

export default {
  components: {

  },
  data() {
    return {
      searchData: {
        orderNo: '',
        sn: '',
        phone: '',
        beginTime: '',
        endTime: ''
      },
      searchForm: [
        { type: "input", placeholder: "订单编号", prop: "orderNo", width: 200 },
        { type: "input", placeholder: "设备编号", prop: "sn", width: 200 },
        {
          type: "date", placeholder: "开始日期", prop: "beginTime", width: 180, change: (val) => { this.searchData.beginTime = val }
        },
        {
          type: "date", placeholder: "结束日期", prop: "endTime", width: 180, change: (val) => { this.searchData.endTime = val }
        },
        { type: "input", placeholder: "用户手机号", prop: "phone", width: 200 },
      ],
      searchHandle: [
        { type: 'primary', label: '搜索', handle: e => this.getData(), },
        // {type:'primary',label:'重置', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [{}],
      tableCols: [
        { label: "订单编号", prop: "orderNo", },
        // { label: "订单类型", prop: "nickName",  },
        { label: "套餐信息", prop: "mealName", },
        { label: "旧电池编号", prop: "oldBatteryNo", },
        { label: "新电池编号", prop: "newBatteryNo", },
        { label: "设备所属信息", prop: "operatorName", },
        { label: "用户信息", prop: "userName", },
        { label: "用户手机号", prop: "phone", },
        // { label: "订单金额", prop: "isVip_des",  },
        // { label: "支付金额", prop: "isVip_des",  },
        {
          label: "订单状态", prop: "status",
          type: 'html',
          html: (row) => {
            let html = '<p>' +
              (row.status == 0 ? "进行中" :
                row.status == 1 ? "已完成" :
                  row.status == 2 ? "已逾期" :
                    row.status == 3 ? "有退款" : "----")
              + '</p>'
            return html
          }
        },
        {
          label: "电池状态", prop: "btStatus", type: 'html', html: (row) => {
            let html = '<p>' +
              (row.btStatus == 0 ? "租借中" :
                row.btStatus == 1 ? "已归还" :
                  row.btStatus == 2 ? "未归还" : "--")
              + '</p>'
            return html
          }
        },
        { label: "支付时间", prop: "ftime", },
        { label: "提交时间", prop: "ctime", },
        {
          label: '操作',
          type: "button",
          width: 200,
          btnList: [
            {
              label: '结束订单',
              type: 'text',
              handle: (row) => {
                this.$confirm('确定要结束订单吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(async () => {
                  const res = await this.apis.orderExchange_endOrder({
                    id: row.id
                  });
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                }).catch(() => {

                });
              }
            },
            // {
            //   label: '订单详情',
            //   type: 'text',
            //   handle: (row) =>{}
            // },
            {
              label: '更换电池',
              type: 'text',
              handle: (row) => {
                this.formData.id = row.id;
                this.elFormVisible('更换电池')
              }
            },
            {
              label: '归还',
              type: 'text',
              isShow: (row) => {
                if (row.btStatus == 2) {
                  return true
                } else {
                  return false
                }
              },
              handle: (row) => {
                this.$confirm('确定已归还吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(async () => {
                  const res = await this.apis.orderExchange_giveBack({
                    id: row.id
                  });
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  });
                  this.getData();
                }).catch(() => {

                });
              }
            },
          ]
        }
      ],
      tableHandles: [
        // {
        //   label: "数据导出",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },

      formData: {
        id: '',
        batteryNo: '',
      },
      formCols: [
        { type: "input", label: "更换电池", placeholder: '请输入更换后的电池编号', width: 350, prop: "batteryNo", rmblock: true, remark: '' }
      ],
      formRules: {
        batteryNo: [
          { required: true, message: '请输入', trigger: 'blur' },
        ]
      },
      formHandle: [
        {
          label: "取消",
          handle: e => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: e => {
            this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
              if (valid) {
                const res = await this.apis.orderExchange_replace(this.formData);

                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });

                this.getData();

              }
            });
          }
        },

      ],
    };
  },
  created() { },
  mounted() {
    this.getData();
  },
  methods: {
    userDetailsCall() {
      this.userDetailsData.show = false;
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.orderExchange_list({
        orderNo: this.searchData.orderNo,
        sn: this.searchData.sn,
        phone: this.searchData.phone,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
      });
      // console.log(res);
      var list = res.rows || [];

      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }

  },
};
</script>

<style scoped lang="scss">
</style>
